<template>
  <div>
    <!-- 调用方调用排行 -->
    <div style="position: absolute;top: 10px;right: 10px;">
      <el-button type="text" @click="qh(0)" v-if="dateType == 1">截止日期：近七天</el-button>
      <el-button type="text" @click="qh(1)" v-if="dateType == 0">截止日期：近三十天</el-button>
    </div>
    <div ref="dataDownload" style="width: 100%; height: 300px"></div>
    <!-- <div style="width: 100%; height: 300px"> -->
    <!-- <span style="font-size: 30px;color: #fff;">一个柱形图</span> -->

    <!-- </div> -->
  </div>
</template>
<script>
import { getUserCallCount, getwebViewCount } from "@/utils/httpUtils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      datas: {
        "apiId": "1",
        "monitorQueryType": "Api_Usage",
        "userId": "1",
        "version": "",
        "dateFrom": "now-1w",
        "dateTo": "now",
        "page": "1",
        "size": "10",
        "fieId": "",
        "order": ""
      },
      tableData: [],
      myChart: null,
      currentDate: "",
      dateType: 1,
    };
  },
  mounted() {
    this.getVisitsData();
  },
  methods: {
    qh(num) {
      this.dateType = num
      this.getVisitsData()
    },
    getVisitsData() {
      let xData = []
      let yData = []
      getwebViewCount(this.dateType).then((res) => {
        console.log(res, "res");
        res.forEach(item => {
          xData.push(item.day)
          yData.push(item.sum)
        });
        const echarts = require("echarts");
        const myChart = echarts.init(this.$refs.dataDownload);
        const option = {
          // color: "#01FFCD",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "7%",
            bottom: "3%",
            top: "6%",
            containLabel: true,
            show: false
          },
          xAxis: {
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#fff'
            },
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(230, 247, 255, 0.20)",
              },
            },
          },
          series: [
            {
              label: {
                normal: {
                  // show: true,
                  // position: "top",
                  color: "#fff",
                },
              },
              itemStyle: {
                // normal: {
                //   color: function (params) {
                //     let colorlist = [
                //       '#816BF1', '#4BADFF', '#027FEB', '#31CCEA'
                //     ]
                //     let colorItem = colorlist[params.dataIndex]
                //     return colorItem
                //   }
                // }
              },
              data: yData,
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);

      })






      // getUserCallCount(_this.datas).then((res) => {
      //   let xData = []
      //   let yData = []
      //   res.data.map(function (item) {
      //     console.log(item);
      //     xData.push(item.user)
      //     yData.push(item.count)
      //   })
      //   console.log(xData, yData);
      //   //获取DOM节点并初始化
      //   const echarts = require("echarts");
      //   const myChart = echarts.init(this.$refs.dataDownload);
      //   const option = {
      //     color: "#01FFCD",
      //     tooltip: {
      //       trigger: "axis",
      //       axisPointer: {
      //         type: "shadow",
      //       },
      //     },
      //     grid: {
      //       left: "3%",
      //       right: "7%",
      //       bottom: "3%",
      //       top: "6%",
      //       containLabel: true,
      //       show: false
      //     },
      //     xAxis: {
      //       type: "category",
      //       // axisLabel: {
      //       //   show: false,
      //       // },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //       axisLine: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         color: '#fff'
      //       },
      //       data: xData
      //     },
      //     yAxis: {
      //       type: "value",
      //       splitLine: {
      //         show: true,
      //         lineStyle: {
      //           type: "dashed",
      //           color: "rgba(230, 247, 255, 0.20)",
      //         },
      //       },

      //     },
      //     series: [
      //       {
      //         name: "访问量",
      //         type: "bar",
      //         data: yData,
      //         label: {
      //           normal: {
      //             show: true,
      //             position: "top",
      //             color: "#fff",
      //           },
      //         },
      //         itemStyle: {
      //           normal: {
      //             color: function (params) {
      //               let colorlist = [
      //                 '#816BF1', '#4BADFF', '#027FEB', '#31CCEA'
      //               ]
      //               let colorItem = colorlist[params.dataIndex]
      //               return colorItem
      //             }
      //           }
      //         },
      //         barWidth: 30, // 设置柱子宽度
      //       },
      //     ],
      //   };
      //   myChart.setOption(option);
      // });

    },
  },
};
</script>
